//color-mei
// $title_b:#fafafa; //标题栏背景色
$side_b:#f4f4f4; //描边 & 模块分割底色
$side_strong:#cacaca; //按钮描边
$placeholder_b:#cccccc; //input 级别的提示
$divider_b: #E5E5E5; //divider分割线
$hint_b: #888888; //hint & disable
$icon_b: #666666; //icon & secondary
$text_b: #222222; //text
$divider_w: rgba(white, .12); //divider
$hint_w: rgba(white, .3); //hint disable
$icon_w: rgba(white, .7); //icon secondary
$text_w: rgb(255, 255, 255); //text
//color-ji
$title_b:#f7f7f7;
//mei
$mei_red:#e74c75;
$mei_blue: #318FE2;
//status
$success_green:#03b266;
$fail_red:#ff4444;
$warn_yellow:#fc7e36;
$disable:#898183;
//shadow
$shadow_color: 0 2px 2px 0 rgba(0, 0, 0, 0.05),
0 1px 4px 0 rgba(0, 0, 0, 0.08),
0 3px 1px -2px rgba(0, 0, 0, 0.2);
//paper
$paper_color: #fff;
//size
$w_space: -5px;
//ji
$ji_green:#26a597;
$theme_color:$ji_green;
// ---------------------------模板------------------------
@mixin cicle($size:28px) {
    flex-shrink: 0;
    display: inline-block;
    width: $size;
    height: $size;
    border-radius: 100%; // border: solid 1px #ccc;
    overflow: hidden;
    >img {
        width: 100%;
        height: 100%;
    }
}

@mixin square($size:28px) {
    flex-shrink: 0;
    display: inline-block;
    width: $size;
    height: $size;
    overflow: hidden;
    >img {
        width: 100%;
        height: 100%;
    }
}

@mixin paper($radius) {
    background: $paper_color;
    border-radius: $radius;
}

@mixin flex($scale:1) {
    display: block;
    flex: $scale;
}

@mixin animate($time:0.3s) {
    transition: all $time;
}

@mixin shadow($color) {
    box-shadow: $color;
}

//限制一行的情况需要另外处理
@mixin ellip($row:2) {
    display: -webkit-box;
    overflow: hidden;
    box-orient: vertical;
    -webkit-line-clamp: $row;
    -webkit-box-orient: vertical;
}

@mixin btn($size:0px) {
    display: inline-block;
    border-radius: $size;
    text-align: center;
    cursor: pointer;
    &:disabled {
        cursor: not-allowed;
        background-color: $disable !important;
    }
    &:active {
        opacity: .8;
    }
    outline: none !important;
    &:focus {
        outline: none !important;
    }
}

@mixin hoverWave($hoverColor:$theme_color) {
    position: relative;
    overflow: hidden;
    &:after {
        content: '';
        position: absolute;
        top: 50%;
        right: -100%;
        transform: scale(0);
        width: 100%;
        height: 100%;
        border-radius: 1000px;
        background-color: rgba($color:$hoverColor, $alpha: .1);
        transition: all .3s;
    }
    &:hover {
        &:after {
            transform: scale(3.5);
            left: -100%;
            right: unset;
        }
    }
}

@mixin disableOutline() {
    outline: none !important;
    &:focus {
        outline: none !important;
    }
}

// ----------------------------------基础布局样式----------------------------------------
$space: 2;
@for $i from 0 to 128 {
    $p_var: $i*$space;
    .p#{$p_var} {
        padding: $p_var * 1px;
    }
    .pl#{$p_var} {
        padding-left: $p_var * 1px;
    }
    .pr#{$p_var} {
        padding-right: $p_var * 1px;
    }
    .pt#{$p_var} {
        padding-top: $p_var * 1px;
    }
    .pb#{$p_var} {
        padding-bottom: $p_var * 1px;
    }
    .ptb#{$p_var} {
        padding-top: $p_var * 1px;
        padding-bottom: $p_var * 1px;
    }
    .plr#{$p_var} {
        padding-left: $p_var * 1px;
        padding-right: $p_var * 1px;
    }
}

@for $i from 0 to 128 {
    $p_var: $i*$space;
    .m#{$p_var} {
        margin: $p_var * 1px;
    }
    .ml#{$p_var} {
        margin-left: $p_var * 1px;
    }
    .mr#{$p_var} {
        margin-right: $p_var * 1px;
    }
    .mt#{$p_var} {
        margin-top: $p_var * 1px;
    }
    .mb#{$p_var} {
        margin-bottom: $p_var * 1px;
    }
    .mtb#{$p_var} {
        margin-top: $p_var * 1px;
        margin-bottom: $p_var * 1px;
    }
    .mlr#{$p_var} {
        margin-left: $p_var * 1px;
        margin-right: $p_var * 1px;
    }
}

@for $i from 0 to 17 {
    $w_var: $i*32;
    .w#{$w_var} {
        width: $w_var * 1px;
    }
}

@for $i from 0 to 17 {
    $h_var: $i*32;
    .h#{$h_var} {
        height: $h_var * 1px;
    }
}

//position
.p-r {
    position: relative;
}

.p-a {
    position: absolute;
}

//overflow
.ov-h {
    overflow: hidden;
}

.ov-a {
    overflow: auto;
}

// display系列
.d-il {
    display: inline-block;
}

.d-b {
    display: block;
}

.d-i {
    display: inline;
}

.d-n {
    display: none;
}

.d-f {
    display: flex;
}

// 宽度系列
.w-full {
    width: 100%;
}

.w288{
    width: 288px;
}

.w64{
    width: 64px;
}

.w128{
    width: 128px;
}

// 高度系列
.h48 {
    height: 48px;
}

.h56 {
    height: 56px;
}

// 居中系列
.ta-r {
    text-align: right;
}

.ta-l {
    text-align: left;
}

.ta-c {
    text-align: center;
}

.ta-j {
    text-align: justify;
}

.va-t {
    vertical-align: top;
}

.va-m {
    vertical-align: middle;
}

.va-b {
    vertical-align: bottom;
}

.v-h {
    visibility: hidden;
}

// 定位系列
.pos-a {
    position: absolute;
}

.pos-r {
    position: relative;
}

.pos-f {
    position: fixed;
}

// flex布局系列
.flex1 {
    @include flex();
}

.flex2 {
    @include flex(2);
}

.flex3 {
    @include flex(3);
}

.flex4 {
    @include flex(4)
}

.ac {
    align-items: center;
}

.as {
    align-items: stretch;
}

.ai-b {
    align-items: baseline;
}

.fw {
    flex-wrap: wrap
}

.fd-c {
    flex-direction: column;
}

.jc-b {
    justify-content: space-between;
}

.jc {
    justify-content: center;
}

.jc-r {
    justify-content: flex-end;
}

.jc-l {
    justify-content: flex-start;
}

.s0 {
    flex-shrink: 0;
}

// 字体系列
.fs0 {
    font-size: 0px;
}

.fs10 {
    font-size: 10px;
}

.fs12 {
    font-size: 12px;
}

.fs14 {
    font-size: 14px;
}

.fs16 {
    font-size: 16px;
}

.fs18 {
    font-size: 18px;
}

.fs20 {
    font-size: 20px;
}

.fs24 {
    font-size: 24px;
}

.fs34 {
    font-size: 34px;
}

.fs45 {
    font-size: 45px;
}

.fs56 {
    font-size: 56px;
}

// 边框系列
.bor {
    border: solid 1px;
}

.bor-t {
    border-top: solid 1px;
}

.bor-b {
    border-bottom: solid 1px;
}

.bor-l {
    border-left: solid 1px;
}

.bor-r {
    border-right: solid 1px;
}

// 层级系列
.z-1 {
    z-index: -1;
}

.z1 {
    z-index: 1;
}

.z9 {
    z-index: 10;
}

.z10 {
    z-index: 10;
}

.z99 {
    z-index: 99;
}

.z500 {
    z-index: 500;
}

//lineHeight
.lh48 {
    line-height: 48px;
}

// 背景系列
.bg-w {
    background-color: #fff;
}

.bg-b {
    background-color: rgba($color:black, $alpha: .8);
}

.bg-module {
    background-color: #f4f4f4; //模块分割底色
}

.bg-title {
    background-color: #fafafa; //title 底色
}

.bg-disable {
    background-color: $disable;
}

.bg-tempt {
    background-color: rgba(black, .7)
}

.bg-placeholder {
    background-color: $placeholder_b
}

.bg-divider {
    background-color: $divider_b
}

.bg-hint {
    background-color: $hint_b
}

.bg-icon {
    background-color: $icon_b
}

.bg-text {
    background-color: $text_b
}

.bg-side {
    background-color: $side_b
}

.bg-side-s {
    background-color: $side_strong
}

.tp {
    background-color: transparent;
}

//渐变色
.bg-mei-red {
    background-image: linear-gradient(-117deg, #D5466C 0%, #FA5B52 100%);
}

.bg-mei-yel {
    background-image: linear-gradient(-138deg, #FCB719 0%, #F6A346 100%);
}

.bg-blue {
    background-color: $mei_blue;
}

.bg-theme-red {
    background-color: $ji_green;
}

.bg-theme {
    background-color: $theme_color;
}

// 状态色
.bg-success {
    background-color: $theme_color !important;
}

.bg-fail {
    background-color: $fail_red;
}

.bg-warn {
    background-color: $warn_yellow;
}

// 颜色系列
.c-divider-b {
    color: $divider_b;
} //divider
.c-hint-b {
    color: $hint_b;
} //hint disable
.c-icon-b {
    color: $icon_b;
} //icon secondary
.c-text-b {
    color: $text_b;
} //text
.c-divider-w {
    color: $divider_w;
} //divider
.c-hint-w {
    color: $hint_w;
} //hint disable
.c-icon-w {
    color: $icon_w;
} //icon secondary
.c-text-w {
    color: $text_w;
} //text
.c-blue {
    color: $mei_blue;
}

// 状态色
.c-success {
    color: $success_green;
}

.c-fail {
    color: $fail_red;
}

.c-warn {
    color: $warn_yellow;
}

.c-placeholder {
    color: $placeholder_b;
}

//极光色
.c-red {
    color: $mei_red;
}

.c-theme {
    color: $theme_color;
}

.b-theme {
    border-color: $theme_color;
}

.b-side {
    border-color: $side_b;
}

.b-side-s {
    border-color: $side_strong;
}

.op0 {
    opacity: 0;
}

// ---------------------------------常用模块----------------------------
// 用于全屏居中（容器）
.center-fullscreen {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.box {
    box-sizing: border-box;
}

.shadow {
    @include shadow($shadow_color)
}

.cicle36 {
    @include cicle(36px)
}

.square48 {
    @include square(48px)
}

.square56 {
    @include square(56px)
}

.square72 {
    @include square(72px)
}

.paper {
    @include paper(3px)
}

.paper6 {
    @include paper(6px)
}

//文字限制几多行后就出现省略号
.ellip1 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ellip2 {
    @include ellip(2);
}

.ellip3 {
    @include ellip(3);
}

//inline button 边距跟字体大小自己调
.btn {
    @include btn(3px);
    border: none;
}

//极光常用的绿色按钮
.btn-n {
    @include btn(3px);
    @include hoverWave(#fff);
    @extend .bg-theme-red;
    border: none;
    color: $text_w;
}

//极光常用的白色按钮
.btn-w {
    @include btn(3px);
    @extend .bg-w; // border-color: $side_strong;
    color: $icon_b;
    position: relative;
    &:before {
        content: '';
        position: absolute;
        top: -50%;
        bottom: -50%;
        left: -50%;
        right: -50%;
        transform: scale(0.5);
        border-style: solid;
        border-width: 1px;
        border-color: $side_strong;
        border-radius: 3px;
    }
}

//极光常用的红色镂空按钮
.btn-hollow {
    @include btn(3px);
    @include hoverWave(#fff);
    @extend .tp;
    @extend .bor;
    border-color: $theme_color;
    color: $theme_color;
    cursor: pointer;
}

//极光常用镂空tag
.tag-hollow {
    @include disableOutline();
    @include hoverWave(#fff);
    @extend .tp;
    @extend .bor;
    border-color: $theme_color;
    color: $theme_color;
    cursor: pointer;
}

//极光常用纯文字tag
.tag-text {
    @include disableOutline(); // @include hoverWave($theme_color);
    @include btn();
    @include hoverWave();
    @extend .tp;
    border: none;
    color: $theme_color;
    cursor: pointer;
}

.height-limit-screen {
    max-height: 700px;
    overflow-y: scroll;
}

[scrollbar='normal']::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 2px;
    /*高宽分别对应横竖滚动条的尺寸*/
    height: 8px;
}

[scrollbar='normal']::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 2px;
    /* -webkit-box-shadow: inset 0 0 5px #fafafa; */
    background: #f4f4f4;
}

[scrollbar='normal']::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    /* -webkit-box-shadow: inset 0 0 5px #fafafa; */
    border-radius: 2px;
    background: transparent;
}

[tableHover='normal'] {
    transition: background-color .3s;
    &:hover {
        background-color: rgba($color:$theme_color, $alpha: .1);
    }
}

@import './_varConfig';
@import './mixin/_mixin';
@import './_tab';
@import './_input';
@import './_alertMsg';
@import './_newBalance';
@import './_geometry';
@import './_3dtransform';
@import './_progress';
@import './_loading';
@import './_nav';
@import './_menu';
@import './_icon';
@import './_slideBar';
@import './comment';
@import './img';
@import './toggler';
@import './bug.scss';
@import './_slideBar.v2';
@import './table';
@import './paging';
